<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>PlantUML Presentation</title>

		<meta name="description" content="PlantUML is used to draw UML diagram, using a simple and human readable text description.  ">
		<meta name="author" content="Hans He">

		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/black.css" id="theme">

		<!-- Theme used for syntax highlighting of code -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section>
					<h1>Plant UML</h1>
					<p><small>by <a href="mailto:xhe@kalengo.com">Hans He</a> / <a href="http://www.zhinengtougu.com/">@飞蝉智投</a></small></p>
				</section>

				<section>
					<h2>UML Tools</h2>
					<p>
						<a href="http://www.umlchina.com/Tools/Newindex1.htm" target="_blank">Full List of UML Tools</a> from UMLChina.com
						<ul>
							<li>Enterprise Architect</li>
							<li>Visual Paradigm for UML</li>
							<li>StarUML</li>
							<li>ArgoUML</li>
							<li>...</li>
							<li>PlantUML</li>
						</ul>
					</p>

				</section>

				<section>
					<h1>PlantUML</h1>
					<p><a href="http://plantuml.com" target="_blank">PlantUML</a> is used to draw UML diagram, using a simple and human readable text description.</p>
					<p>Online experience
						<ul>
							<li><a href="http://plantuml.com/screenshot" target="_blank">screenshot</a></li>
							<li><a href="http://www.plantuml.com/plantuml" target="_blank">online demo server</a></li>
							<li><a href="https://www.planttext.com/" target="_blank">PlantText.com</a></li>
				</section>
				<section>
					<h2>Preview</h2>
					<img src="images/preview.jpg"/>
				</section>

				<section>
					<h2>Write UML in TEXT</h2>
					<p>Plan Text is easy to
						<ul>
							<li>read &amp; write</li>
							<li>version control</li>
							<li>share</li>
						  <li>collaborate</li>
						  <li>integration</li>
					</p>
				</section>

				<section>
					<section>
						<img src="images/cls.jpg"/>
					</section>

					<section>
						<h2>Use Case</h2>
						<img src="images/usecases.png"/>
					</section>

					<section>
						<img src="images/seq.jpg"/>
					</section>

					<section>
						<img src="images/activity.jpg"/>
					</section>

					<section>
						<img src="images/component.jpg"/>
					</section>

					<section>
						<img src="images/state.jpg"/>
					</section>
				</section>
				<section data-markdown>
					<textarea data-template>
						## Local Install &amp; Run

						### Download
						* [plantuml.jar](http://sourceforge.net/projects/plantuml/files/plantuml.jar/download)
						* [PlantUML Language Reference Guide.pdf](http://plantuml.com/PlantUML_Language_Reference_Guide.pdf)
						* [Install &amp; Setup GraphViz](http://plantuml.com/graphviz-dot)
						* [Install Java SE](https://www.java.com/zh_CN/)

						### Run
						* java -jar plantuml.jar
						* change directory to watch text file changes
					</textarea>
				</section>
				<section>
					<section data-markdown>
						<textarea data-template>
							## Edit &amp; Preview In Atom

							* Download &amp; Install [Atom, a hackable text editor](https://atom.io/)
							* Open the text file directory with Atom
							* Split panes for folder, text editor and png previewer
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							![atom](../screenshot.png)
						</textarea>
					</section>
				</section>
				<!-- Example of nested vertical slides -->
				<section>

				<section style="text-align: left;">
					<h1>THE END</h1>
				</section>

			</div>

		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.js"></script>

		<script>

			// More info https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				center: true,

				transition: 'slide', // none/fade/slide/convex/concave/zoom

				// More info https://github.com/hakimel/reveal.js#dependencies
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/zoom-js/zoom.js', async: true },
					{ src: 'plugin/notes/notes.js', async: true }
				]
			});

		</script>

	</body>
</html>
